<template>
    <div>
        vca函数式编程
        {{ obj.name }}
       <!--  在使用时必须调用setup返回出来的对象.属性   -->
        {{ obj.age }}
        {{ obj.c }}
        <button @click="handleClick">click</button>
    </div>
</template>

<script>
import { reactive } from 'vue'
export default {
    setup() {   //固定的函数,固定的生命周期
        // 函数式编程

        // const声明的对象不能更改,但是对象内的属性可以更改
        const obj = reactive({ //响应式对象
            name: '张三',
            age: 18,
            c: 3
        })

        const handleClick = () => {
            obj.name = '李四',
            obj.age = 19,
            obj.c = 4
        }
        return {  //函数内是临时变量,必须return出去
            obj,  //对象简写
            handleClick,  //将方法名返回出去
        }
    }
}
</script>